<!-- 编辑IP形象新建编辑 IP形象列表跳转和表情包详情页跳转共用一个页面 -->
<template>
  <div class="ip-edit-mengli">
    <div :class="{'mobile-create': showMobilePage}" class="mengli-form">
      <Title title="IP信息编辑" font-size="16px" style="margin-bottom: 16px" />
      <div class="ip-info-box">
        <ip-info-edit :is-cloumn="true" :is-show-disable-input="true" :ip-info="ipInfo" :relevant-list="relevantList" :default-params="defaultParams" :is-ip-image="isIpImage" @update:formValid="updateIpInfoValid" @update:ipInfo="updateIpInfo"/>
      </div>
    </div>
    <fixed-pagination>
      <div class="center">
        <el-button :loading="toSaveLoad" type="primary" size="small" @click="toSave">保存</el-button>
        <el-button type="info" size="small" class="cancel-btn-style" @click="toBack">取消</el-button>
      </div>
    </fixed-pagination>
  </div>
</template>
<script>
import IpInfoEdit from './module/ip-info-edit';
import Title from '@/components/Title';
import ElMessage from '@/utils/message';
import mobileCreate from '@/mixins/mobileCreate';
import { editMengliIp, getMengliIpDetail } from '@/api/mengli';
export default {
  components: { IpInfoEdit, Title },
  mixins: [mobileCreate],
  data() {
    return {
      ipId: '',
      toSaveLoad: false,
      defaultParams: {
        supplier: ''
      },
      ipInfo: {
        ipName: '',
        range: '',
        cover: '',
        rewardNum: '',
        rewardPrice: '',
        sendNum: '',
        workNum: '',
        downloadNum: '',
        relevantIds: [],
        ipSeriesId: '',
        supplierId: '',
        accreditCost: '',
        ecomSaleCost: ''
      },
      antiShakeTime: 0,
      ipInfoFormValid: false, // ip 信息模块的表单验证结果
      relevantLoading: false,
      relevantName: '',
      relevantList: {},
      isIpImage: false // 来源为ip形象列表页
    };
  },
  created() {
    const route = this.$route;
    const { ipId, workId } = route.query;
    this.isIpImage = route.name === 'mengliIpImageEdit';
    this.ipId = ipId;
    this.workId = workId;
    this.getMengliIpDetail(ipId);
  },
  methods: {
    editMengli(params) {
      editMengliIp(params).then(res => {
        if (res.code === 200) {
          ElMessage.success('编辑成功');
          this.toBack();
        } else {
          ElMessage.error(res.message);
        }
      }).catch(err => {
        console.log(err);
      });
    },
    updateIpInfoValid(value) {
      this.ipInfoFormValid = value;
    },
    updateIpInfo(data) {
      this.ipInfo = data;
    },
    // 获取ip详情
    getMengliIpDetail(id) {
      const params = {
        id
      };
      getMengliIpDetail(params).then(res => {
        if (res.code === 200) {
          const { name: ipName, range, cover, rewardNum, rewardPrice, sendNum, workNum, downloadNum, relevantIds, ipSeriesId, supplier, accreditCost, ecomSaleCost } = res.data;
          this.ipInfo = { ipName, range, cover, rewardNum, rewardPrice, sendNum, workNum, downloadNum, relevantIds, ipSeriesId };
          this.ipInfo.accreditCost = accreditCost || 0;
          this.ipInfo.ecomSaleCost = ecomSaleCost || 0;
          if (supplier) {
            this.ipInfo.supplierId = supplier.id;
            this.defaultParams.supplier = supplier;
          }
        }
      });
    },
    toBack() {
      if (this.isIpImage) {
        this.$router.push({
          name: 'mengliIpImage'
        });
        return false;
      }
      this.$router.push({
        name: 'mengliDetail',
        params: { id: this.ipId },
        query: { workId: this.workId }
      });
    },
    toSave() {
      var timestamp = new Date().getTime();
      if (timestamp - this.antiShakeTime < 500) {
        return;
      }
      this.antiShakeTime = timestamp;
      if (!this.ipInfoFormValid) {
        this.$message({ type: 'warning', message: '请检查信息是否填写完整' });
        return;
      }
      if (!this.ipInfo.cover) {
        this.$message({ type: 'warning', message: '请检查信息是否填写完整' });
        return;
      }
      const params = { ...this.ipInfo };
      params['id'] = this.ipId;
      this.editMengli(params);
    }
  }
};
</script>
<style lang="scss" scoped>
.ip-edit-mengli {
  .crm-add-btn {
    margin-left: 32px;
    margin-bottom: 32px;
  }
  .mengli-form {
    margin: 16px;
    min-height: calc(100vh - 70px);
    background-color: #fff;
    padding: 24px 24px 50px 24px;
  }
}
.mobile-create {
  padding: 12px;
  ::v-deep {
    .el-upload, .upload-btn, .user-select-component {
      width: 100% !important;
    }
  }
}
</style>
<style lang="scss">
.ip-edit-mengli {
  .el-input {
    width: 240px;
  }
  .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 240px;
  }
  .el-input__icon {
    line-height: 32px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
  .el-select {
    .el-input {
      .el-select__caret {
        color: #333333;
      }
    }
  }
}
</style>
